/*
* @ddescription: 换货-同意换货弹窗
* @Author: liyujie
* @Date: 2020-12-08
*/
<template>
    <!-- 同意换货弹窗 -->
    <el-dialog
        title="同意换货"
        :visible.sync="dialogVisible"
        width="640px"
        :close-on-click-modal="false"
    >
        <div class="agreeMod">
            <div class="mod-list">
                <el-form
                    :model="agreeRefund"
                    :rules="rules"
                    ref="agreeForm"
                    label-width="120px"
                    class="demo-ruleForm"
                    hide-required-asterisk
                >
                    <el-form-item
                        label="售后类型"
                    >
                        换货
                    </el-form-item>
                    <el-form-item
                        label="售后结果"
                    >
                        同意换货
                    </el-form-item>
                    <el-form-item
                        label="是否退回商品"
                    >
                        <el-radio
                            v-model="agreeRefund.type"
                            :label="3"
                        >
                            需要用户退回商品
                        </el-radio>
                        <el-radio
                            v-model="agreeRefund.type"
                            :label="4"
                        >
                            无需用户退回商品
                        </el-radio>
                    </el-form-item>
                    <el-form-item
                        label="退货地址"
                        style="margin-bottom: 22px"
                        prop="reject_address_no"
                        v-if="agreeRefund.type === 3"
                    >
                        <el-select
                            v-model="agreeRefund.reject_address_no"
                            clearable
                            filterable
                            placeholder="请选择退货地址"
                            size="small"
                            :style="{width: '340px'}"
                        >
                            <el-option
                                v-for="item in agreeRefund.refundList"
                                :key="item.address_no"
                                :label="item.address_title"
                                :value="item.address_no"
                            />
                        </el-select>
                        <p
                            :style="{color: '#20A0FF', cursor: 'pointer', fontSize: '14px', fontWeight: '500', marginLeft: '12px', whiteSpace: 'nowrap', display: 'inline-block'}"
                            @click="() => {
                                this.$router.push({
                                    name: 'goodAfterEdit'
                                })
                            }"
                        >
                            新增地址
                        </p>
                    </el-form-item>
                    <el-form-item
                        label="退货备注"
                        v-if="agreeRefund.type === 3"
                    >
                        <el-input
                            v-model="agreeRefund.reject_remark"
                            type="textarea"
                            :autosize="{ minRows: 4, maxRows: 6}"
                            placeholder="请输入退货备注"
                            maxlength="300"
                            show-word-limit
                            :style="{width: '444px'}"
                        />
                        <p class="tips">
                            展示在用户端退款详情页
                        </p>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <span
            slot="footer"
            class="dialog-footer"
        >
            <el-button
                @click="dialogVisible = false"
                size="medium"
                type="default"
                :style="{width: '120px', marginRight: '32px'}"
            >
                取 消
            </el-button>
            <el-button
                type="primary"
                size="medium"
                :style="{width: '120px'}"
                @click="fnConfirmRefund()"
            >
                确 认
            </el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: 'AgreeExchange',
    data () {
        return {
            dialogVisible: false,
            // 同意换货弹窗数据
            agreeRefund: {
                apply_no: '',
                reject_address_no: '',
                refundList: [],
                reject_remark: '',
                type: 3
            },
            // 同意换货校验
            rules: {
                reject_address_no: [
                    { required: true, message: '请选择退货地址', trigger: 'change' }
                ],
            },
        };
    },
    watch: {
        dialogVisible (val) {
            if(!val) {
                this.$set(this.agreeRefund, 'refund_mark', '');
                this.$set(this.agreeRefund, 'type', 3);
            }
        },
    },
    mounted () {
        this.getRefundList();
    },
    methods: {
        /**
         * @description 获取退货地址列表
         */
        getRefundList () {
            this.$post('/ShopRefundAddress/getList', {}, resp => {
                if (resp.code == 1) {
                    this.agreeRefund.refundList = resp.data.list;

                    //设置默认选中地址
                    for(let key = 0; key < this.agreeRefund.refundList.length; key ++) {
                        if(this.agreeRefund.refundList[key].is_default == 1) {
                            this.$set(this.agreeRefund, 'reject_address_no', this.agreeRefund.refundList[key].address_no);
                        }
                    }
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },
        /**
         * @description 打开弹窗
         * @param row
         */
        show (row) {
            this.agreeRefund.apply_no = row.apply_no;
            this.dialogVisible = true;
        },

        /**
         * @description 关闭弹窗
         */
        close () {
            this.dialogVisible = false;
        },

        /**
         * @description 确认同意换货
         */
        fnConfirmRefund () {

            this.$refs['agreeForm'].validate((valid) => {
                if (valid) {
                    // 同意换货
                    let params = {
                        apply_no: this.agreeRefund.apply_no,
                        type: this.agreeRefund.type,
                        reject_address_no: this.agreeRefund.type === 3 ? this.agreeRefund.reject_address_no : '',
                        reject_remark: this.agreeRefund.type === 3 ? this.agreeRefund.reject_remark : ''
                    };

                    this.$post('/ShopGoodsOrderCancelApply/verify', params, resp => {
                        if (resp.code == 1) {
                            this.dialogVisible = false;
                            this.$emit('update');
                            this.$notify({
                                title: '提示',
                                message: '操作成功',
                                duration: 2000,
                                type: 'success'
                            });
                        } else {
                            this.$notify({
                                title: '警告',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                    });
                }
            });
        },
    }
};
</script>

<style lang="less" scoped>
// 同意退款
.agreeMod {
    display: flex;
    flex-direction: column;
    margin-left: -36px;
    .mod-list {
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        .el-form-item {
            margin-bottom: 10px;
        }
        &-title {
            width: 68px;
            color: #666;
            font-size: 14px;
            white-space: nowrap;
        }
        &-content {
            width: 444px;
            color: #333;
        }
        .tips {
            font-size: 12px;
            font-weight: 400;
            color: #999999;
        }
    }
}

.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
</style>
